<template>
  <de-container class="pa-5">
    <avue-crud
      ref="crud"
      v-model="form"
      :page.sync="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      :search.sync="searchForm"
      @on-load="loadListData"
      @search-change="onSearchChange"
      @keyup.enter="onSearchChange"
      @search-reset="onSearchReset"
      @row-save="onRowSave"
      @row-update="onRowUpdate"
      @row-del="onRowDelete"
      @refresh-change="onRefresh"
      @selection-change="onSelectionChange"
      @filter-change="onFilterChange"
      @sort-change="onSortChange"
    >
      <template slot="menuLeft" slot-scope="{ size }">
        <el-button icon="el-icon-plus" :size="size" type="primary" @click="onClickAdd"> 新增 </el-button>
        <el-button icon="el-icon-edit" :size="size" :disabled="selection.length <= 0" @click="updateStatusMore(1)">
          启用
        </el-button>
        <el-button icon="el-icon-edit" :size="size" :disabled="selection.length <= 0" @click="updateStatusMore(0)">
          禁用
        </el-button>
      </template>
      <template slot="status" slot-scope="{ row }">
        <span v-if="row.status > 0"> <span class="status-dot success"></span>{{ row.$status }} </span>
        <span v-else> <span class="status-dot danger"></span>{{ row.$status }} </span>
      </template>
      <template slot="menu" slot-scope="{ size, row }">
        <el-button type="text" :size="size" @click="onClickView(row)"> 详情 </el-button>
        <el-button type="text" :size="size" @click="onClickEdit(row)"> 编辑 </el-button>
        <el-button type="text" :size="size" @click="onClickDelete(row)"> 删除 </el-button>
        <el-button type="text" :size="size" @click="updateStatus(row)">
          {{ row.status == 0 ? '启用' : '停用' }}
        </el-button>
      </template>
    </avue-crud>
  </de-container>
</template>

<script>
import { requestReportPage, requestReportDelete, requestReportUpdateStatus } from '@/api/indicator-report'
import DeContainer from '@/components/dataease/DeContainer'
import ListMixin from '@/utils/mixins/list-mixin'
import { activeStatus } from '@/utils/color'

export default {
  name: 'UserList',
  components: { DeContainer },
  mixins: [ListMixin],
  data() {
    return {
      statusMap: activeStatus,
      listApi: requestReportPage,
      deleteApi: requestReportDelete,
      tableOption: {
        menuWidth: 320,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        viewBtn: false,
        searchMenuPosition: 'left',
        column: [
          {
            label: '报告名称',
            prop: 'reportName',
            maxlength: 24,
            showWordLimit: true,
            span: 12,
            align: 'left',
            search: true,
            editDisabled: true,
            overHidden: true,
          },
          {
            label: '状态',
            prop: 'status',
            value: 0,
            dicData: [
              {
                label: '停用',
                value: 0,
              },
              {
                label: '启用',
                value: 1,
              },
            ],
            span: 12,
            align: 'center',
            overHidden: true,
          },
          {
            label: '报告类型',
            prop: 'reportType',
            type: 'select',
            value: 'day',
            dicData: [
              {
                label: '日报',
                value: 'day',
              },
              {
                label: '周报',
                value: 'week',
              },
              {
                label: '月报',
                value: 'month',
              },
              {
                label: '季报',
                value: 'quarter',
              },
              {
                label: '年报',
                value: 'year',
              },
            ],
            maxlength: 24,
            showWordLimit: true,
            span: 12,
            align: 'left',
            search: true,
            overHidden: true,
          },
          {
            label: '报告描述',
            prop: 'description',
            span: 24,
            type: 'date',
            searchSpan: 8,
          },
        ],
      },
    }
  },
  created() {},
  methods: {
    onClickAdd() {
      this.$router.push('/redirect/indicator-report/add')
    },
    onClickView(row) {
      this.$router.push({
        path: '/redirect/indicator-report/view',
        query: { id: row.id, type: 'view' },
      })
    },
    onClickEdit(row) {
      this.$router.push({
        path: '/redirect/indicator-report/edit',
        query: { id: row.id, type: 'edit' },
      })
    },
    onClickDelete(row) {
      this.onRowDelete(row)
    },
    updateStatus(row) {
      const param = {
        status: row.status == 0 ? 1 : 0,
        ids: [row.id],
      }
      requestReportUpdateStatus(param).then((res) => {
        if (res.success) {
          this.$message({
            type: 'success',
            message: '操作成功',
          })
          this.onRefresh()
        } else {
          this.$message({
            type: 'error',
            message: res.message,
          })
        }
      })
    },
    updateStatusMore(type) {
      const param = {
        status: type,
        ids: [],
      }
      this.selection.forEach((item) => {
        param.ids.push(item.id)
      })
      requestReportUpdateStatus(param).then((res) => {
        if (res.success) {
          this.$message({
            type: 'success',
            message: '操作成功',
          })
          this.onRefresh()
        } else {
          this.$message({
            type: 'error',
            message: res.message,
          })
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.status-tag {
  width: 83px;
  height: 24px;
  line-height: 22px;
  border-radius: 12px;
  display: inline-block;
  text-align: center;
}
</style>
